<template>
  <div class="invoice-wrap">
    <div class="top-btn-wrap">
      <el-button icon="el-icon-plus" @click="addInvoice('title')"
        >新建发票抬头</el-button
      >
    </div>
    <div class="listTable">
      <el-table :data="titleList" stripe>
        <el-table-column
          v-for="(item, index) in titleHeadList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="titleFormatter"
          show-overflow-tooltip
        />
        <el-table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary-text"
              style="padding: 0"
              @click="operateTitle('edit', scope)"
              >编辑</el-button
            >
            <el-button
              type="primary-text"
              style="padding: 0"
              @click="operateTitle('delete', scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="top-btn-wrap mt16">
      <el-button icon="el-icon-plus" @click="addInvoice('invoice')">新建发票</el-button>
    </div>

    <div class="listTable">
      <el-table
        :data="invoiceList"
        :cell-class-name="cellClassName"
        stripe
      >
        <el-table-column
          v-for="(item, index) in invoiceHeadList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          show-overflow-tooltip
        >
          <template slot-scope="{ row, column }">
            <template v-if="item.prop == 'checkStatus'">
              <span
                :style="setStatusStyle(row.checkStatus)"
                class="status-mark"
              />
              <span>{{ getStatusName(row.checkStatus) }}</span>
            </template>
            <template v-else>
              {{ invoiceFormatter(row, column) }}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :resizable="false"
          label="操作"
          fixed="right"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.invoiceStatus == 1"
              type="primary-text"
              style="padding: 0"
              @click="markReceivables(scope)"
              >{{
                scope.row.invoiceStatus == 1 ? "已开票" : "标记为开票"
              }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
 <script>
export default {
  name: "customAddress",
  data() {
    return {
      invoiceHeadList: [
        { prop: "invoiceApplyNumber", width: "120", label: "发票申请编号" },
        { prop: "contractNum", width: "120", label: "合同编号" },
        { prop: "contractMoney", width: "120", label: "合同金额" },
        { prop: "invoiceMoney", width: "120", label: "开票金额（元）" },
        { prop: "invoiceDate", width: "120", label: "开票日期" },
        { prop: "realInvoiceDate", width: "120", label: "实际开票日期" },
        { prop: "invoiceType", width: "120", label: "开票类型" },
        { prop: "invoiceNumber", width: "120", label: "发票号码" },
        { prop: "logisticsNumber", width: "120", label: "物流单号" },
        { prop: "ownerUserName", width: "120", label: "负责人" },
        { prop: "checkStatus", width: "120", label: "审核状态" },
      ],
      titleHeadList: [
        { prop: "titleType", width: "120", label: "抬头类型" },
        { prop: "invoiceTitle", width: "120", label: "开票抬头" },
        { prop: "taxNumber", width: "120", label: "纳税人识别号" },
        { prop: "depositBank", width: "120", label: "开户行" },
        { prop: "depositAccount", width: "120", label: "开户账号" },
        { prop: "depositAddress", width: "120", label: "开票地址" },
        { prop: "telephone", width: "120", label: "电话" },
        { prop: "ownerUserName", width: "120", label: "创建人" },
        { prop: "createTime", width: "120", label: "创建时间" },
      ],
      titleList: [],
      invoiceList: [],
    };
  },

  methods: {
    addInvoice(type){

    },
    operateTitle(type) {},
    setStatusStyle(status) {
      return {
        backgroundColor: setStatusColor(status),
      };
    },
    setStatusColor(status) {
      if (status == 0) {
        return "#FF991F";
      } else if (status == 1) {
        return "#00875A";
      } else if (status == 2) {
        return "#DE350B";
      } else if (status == 3) {
        return "#FF991F";
      } else if (status == 4) {
        return "#5E6C84";
      } else if (status == 5) {
        return "#FF991F";
      } else if (status == 6) {
        return "#5E6C84";
      } else if (status == 8) {
        return "#5E6C84";
      } else if (status == 10) {
        return "#0052CC";
      }
    },
    getStatusName(status) {
      if (status == 0) {
        return "待审核";
      } else if (status == 1) {
        return "通过";
      } else if (status == 2) {
        return "拒绝";
      } else if (status == 3) {
        return "审核中";
      } else if (status == 4) {
        return "撤回";
      } else if (status == 5) {
        return "未提交";
      } else if (status == 6) {
        return "创建";
      } else if (status == 8) {
        return "已作废";
      } else if (status == 10) {
        return "正常";
      }
      return "";
    },
    invoiceFormatter(row, column) {
      if (column.property == 'invoiceType') {
        return {
          1: '增值税专用发票',
          2: '增值税普通发票',
          3: '国税通用机打发票',
          4: '地税通用机打发票',
          5: '收据'
        }[row[column.property]]
      } else if (column.property == 'contractMoney' || column.property == 'invoiceMoney') {
        return separator(row[column.property] || 0)
      }
      return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'invoiceApplyNumber') {
        return 'look--underline'
      } else {
        return ''
      }
    },
    titleFormatter(row, column) {
      if (column.property === 'titleType') {
        return {
          1: '单位',
          2: '个人'
        }[row[column.property]]
      }
      return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
    },
  },
};
</script>
  
<style lang="scss" scoped>
.invoice-wrap {
    .mt16{
        margin-top: 16px;
    }
  .top-btn-wrap {
    text-align: right;
    margin-bottom: 16px;
  }
  .fist-icon {
    margin-right: 3px;
    font-size: 14px;
    color: #36b37e;
  }
  .set-chief-btn {
    color: #344563;
  }
}
</style>